<template>
	<div>
    <!-- 查看详情页面 -->
    <div>
    	<el-dialog title="详细信息" :visible.sync="detailsFormVisible">
        <el-table :data="detailsform.data" style="width: 100%;line-height: 20px;">
        	<el-table-column prop="createTime" label="申请时间" width="220">
        	</el-table-column>
        	<el-table-column prop="name" label="申请人姓名" width="220">
        	</el-table-column>
        	<el-table-column label="申请结果" width="260">
            <template slot-scope="scope">
                <span v-if="scope.row.reservation == 1">预约成功</span>
                <span v-else-if="scope.row.reservation == 2">预约失败(社区预约总人数较少)</span>
                <span v-else>正在预约中</span>
              </template>
        	</el-table-column>
        </el-table>
    	</el-dialog>
    </div>
    <!-- 表格内容 -->
		<el-table :data="pageInfo.list" style="width: 100%;line-height: 20px;">
			<el-table-column prop="date" label="申请时间" width="250">
			</el-table-column>
			<el-table-column prop="name" label="申请人姓名" width="180">
			</el-table-column>
			<el-table-column prop="number" label="申请人数" width="180">
			</el-table-column>
			<el-table-column label="申请结果" width="250">
        <template slot-scope="scope">
            <span v-if="scope.row.reservation == 1">预约成功</span>
            <span v-else-if="scope.row.reservation == 2">预约失败(社区预约总人数较少)</span>
            <span v-else>正在预约中</span>
          </template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="findDetails(scope.$index, scope.row)">查看详情</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">撤回</el-button>
				</template>
			</el-table-column>
		</el-table>
    <!-- 分页功能 -->
    <div class="block">
    	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    		:current-page="currentPage" :page-sizes="[2,3,4]" :page-size="pageSize"
    		layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
    	</el-pagination>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        //用户名
        username:'',
        //查看详情弹框
        detailsFormVisible: false,
        detailsform:[
        ],
        //当前页码
        currentPage: 1,
        //每页显示的条数
        pageSize: 3,
        pageInfo: {},
			}
		},
		methods: {
			findDetails(index, row) {
				console.log(index, row);
        this.detailsFormVisible=true;
        this.$axios.get("http://localhost:8080/epidemic"+ "/" + row.id).then(res=>{
          console.log(res.data);
          this.detailsform = {...res.data};
        })
			},
			handleDelete(index, row) {
				console.log(index, row);
				this.$confirm('此操作撤回该申请, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//发送ajax
					this.$axios.delete("http://localhost:8080/epidemic/" +row.id).then(res => {
            console.log(res.data.code);
						if (res.data.code == 200) {
              console.log(res.data);
							this.$message({
								type: 'success',
								message: res.data.msg
							});
						}else{
							this.$message({
								type: 'error',
								message: res.data.msg
							});
						}
						this.getEpidemicList();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消撤回'
					});
				});
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getEpidemicList();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getEpidemicList();
			},
      //获取数据库数据方法
			getEpidemicList(){
				this.$axios.get("http://localhost:8080/epidemic"+ "/" + this.currentPage + "/" + this.pageSize+"/" + this.username).then(res=>{
          console.log(res.data);
          this.pageInfo = res.data.data;
        })
			},
		},
    created() {
      this.username=JSON.parse(sessionStorage.getItem("user")).username
    	this.getEpidemicList();
    },
	}
</script>

<style>
  .el-table .warning-row {
  	background: oldlace;
  }
  .el-table .success-row {
  	background: #f0f9eb;
  }
  .el-dialog__header{
    height: 100px;
    padding:0px;
  }
</style>
